import React, { Component } from 'react'
import Button from 'material-ui/Button'
import TextField from 'material-ui/TextField'
import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog';
import { withStyles } from 'material-ui/styles'
import Typography from 'material-ui/Typography';
import { connect } from 'react-redux'
const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'column'
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
  },
  menu: {
    width: 200,
  },
});

@withStyles(styles)
class LoginPage extends Component {
	constructor(props) {
	  super(props);
	}

	handleRequestClose() {
		this.props.setLoginPageVisible(false);
	}

  submit() {
    this.props.login()
  }

  cancel() {
    this.props.setLoginPageVisible(false);
  }

  onChangeName(e) {
    this.props.setUserName(e.target.value);

  }

  onChangePassword(e) {
    this.props.setPassword(e.target.value);

  }

	render() {
		const {showLogin, classes} = this.props
		return (
			<Dialog open={showLogin} onRequestClose={this.handleRequestClose.bind(this)}>
        <DialogTitle>登录</DialogTitle>
        <DialogContent>
          <form className={classes.container} noValidate autoComplete="off">
            <TextField
              autoFocus
              id="username"
              label="用户名"
              className={classes.textField}
              margin="normal"
              onChange={(e) => this.onChangeName(e)}
            />
            <TextField
              id="password"
              label="Password"
              className={classes.textField}
              type="password"
              autoComplete="current-password"
              margin="normal"
              onChange={(e) => this.onChangePassword(e)}
            />
            <Typography type="caption" gutterBottom align="right">
              稍后开放注册功能...
            </Typography>
          </form>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.submit.bind(this)} color="primary">
            登录
          </Button>
          <Button onClick={this.cancel.bind(this)} color="primary">
            取消
          </Button>
        </DialogActions>
      </Dialog>

		)
	}
}

function mapStateToProps(state) {
	return {
		showLogin: state.auth.showLogin
	}
}

export default connect(mapStateToProps)(LoginPage)